<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
	<slider-panel custom-class="out-side-frame" v-bind="$attrs" v-on="$listeners">
		<div class="form-content-frame">
			<el-row class="buildform">
	      <el-form :model="netunitinfos" :rules="unitrules" label-position="top" ref="buildInfoForm" class="build-basicForm" @submit.native.prevent>
	        <div class="buildbasicinfo">
		      <span class="buildtitle">基本信息</span>
		    </div>
	        <el-form-item label="单位名称" prop="oname" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.oname"></el-input>
	        </el-form-item>
	        <el-form-item label="信用代码" prop="olicense" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.olicense"></el-input>
	        </el-form-item>
	         <el-form-item label="单位电话" prop="ophone" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.ophone"></el-input>
	        </el-form-item>
	        <el-form-item label="单位地址" prop="oaddress" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.oaddress"></el-input>
	        </el-form-item>
	        <el-form-item label="消防安全责任人姓名" prop="safeDutyName" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.safeDutyName"></el-input>
	        </el-form-item>
	        <el-form-item label="消防安全责任人电话" prop="safeDutyPhone" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.safeDutyPhone"></el-input>
	        </el-form-item>
	         <el-form-item label="消防安全责任人身份证" prop="safeDutyIdcard" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.safeDutyIdcard"></el-input>
	        </el-form-item>
	        <el-form-item label="消防安全管理人姓名" prop="safeManagerName" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.safeManagerName"></el-input>
	        </el-form-item>
	        <el-form-item label="消防安全管理人电话" prop="safeManagerPhone" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.safeManagerPhone"></el-input>
	        </el-form-item>
	        <el-form-item label="消防安全管理人身份证" prop="safeManagerIdcard" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.safeManagerIdcard"></el-input>
	        </el-form-item>
	         <div class="buildbasicinfo">
		      <span class="buildtitle">地理信息</span>
		    </div>
	        <el-form-item label="详细地址" prop="addressDetail" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.addressDetail"></el-input>
	        </el-form-item>
	        <el-form-item label="路名" prop="road" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.road"></el-input>
	        </el-form-item>
	         <el-form-item label="行政区域编码" prop="xzqy" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.xzqy"></el-input>
	        </el-form-item>
	        <el-form-item label="街道编码" prop="street" class="buildformright">
			  	<el-input v-model.trim="netunitinfos.street"></el-input>
	        </el-form-item>
	         <el-form-item label="门弄牌号" prop="mnph" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.mnph"></el-input>
	        </el-form-item>
	        <el-form-item label="楼栋幢" prop="ldz" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.ldz"></el-input>
	        </el-form-item>
	        <el-form-item label="经度/纬度" prop="gis" style="width: 49%;">
	        	<el-input v-model="netunitinfos.gis==''?'未标记':'已标记'" :disabled="true">
	        		<el-button slot="append" icon="el-icon-location" @click="maptitle='添加联网单位 - '+netunitinfos.oname;innerVisible=true">标记地点</el-button>
	        	</el-input>
	        </el-form-item>

	        <div class="buildbasicinfo">
		      <span class="buildtitle">单位详情</span>
		    </div>
	        <el-form-item label="法人姓名" prop="legalName" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.legalName"></el-input>
	        </el-form-item>
	        <el-form-item label="法人电话" prop="legalPhone" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.legalPhone"></el-input>
	        </el-form-item>
	         <el-form-item label="法人身份证" prop="legalIdcard" class="buildformleft">
	         	<el-input v-model.trim="netunitinfos.legalIdcard"></el-input>
	        </el-form-item>
	        <el-form-item label="单位注册时间" prop="olicenseTime" class="buildformright">
	        	<el-date-picker
                v-model="netunitinfos.oLicenseTimeLong"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                 value-format="timestamp"
                placeholder="选择日期" style="width: 100%;">
              </el-date-picker>
	        </el-form-item>
	         <el-form-item label="单位联系人" prop="olinkman" class="buildformleft">
	        	<el-input v-model.trim="netunitinfos.olinkman"></el-input>
	        </el-form-item>
	        <el-form-item label="单位联系电话" prop="olinkphone" class="buildformright">
	        	<el-input v-model.trim="netunitinfos.olinkphone"></el-input>
	        </el-form-item>
	        <el-form-item label="单位性质" prop="oNature" class="buildformleft">
	        	<el-select v-model="netunitinfos.oNature" placeholder="" style="width:100%;">
			      <el-option label="国有企业" value="国有企业"></el-option>
			      <el-option label="集体企业" value="集体企业"></el-option>
			      <el-option label="民营企业" value="民营企业"></el-option>
			      <el-option label="个体工商户" value="个体工商户"></el-option>
			      <el-option label="中外合资企业" value="中外合资企业"></el-option>
			      <el-option label="外商独资企业" value="外商独资企业"></el-option>
			      <el-option label="股份制企业" value="股份制企业"></el-option>
			      <el-option label="事业单位" value="事业单位"></el-option>
			      <el-option label="国家机关" value="国家机关"></el-option>
			      <el-option label="其他" value="其他"></el-option>
			  	</el-select>
	        </el-form-item>
	        <el-form-item label="单位类型" prop="oclass" class="buildformright">
	        	<el-select v-model="netunitinfos.oclass" placeholder="" style="width:100%;">
	        	  <el-option label="机关" value="机关"></el-option>
			      <el-option label="团体" value="团体"></el-option>
			      <el-option label="企业" value="企业"></el-option>
			      <el-option label="事业" value="事业"></el-option>
			      <el-option label="其他" value="其他"></el-option>
			    </el-select>
	        </el-form-item>
	        <el-form-item label="单位类别" prop="otype" class="buildformleft">
	        	<el-select v-model="netunitinfos.otype" placeholder="" style="width:100%;">
	        	  <el-option label="重点单位" value="1"></el-option>
			      <el-option label="一般单位" value="2"></el-option>
			      <el-option label="九小场所" value="3"></el-option>
			      <el-option label="其他单位" value="4"></el-option>
			    </el-select>
	        </el-form-item>
	        <el-form-item label="是否为重点单位" prop="isKeyunit" class="buildformright">
	        	<el-select v-model="netunitinfos.isKeyunit" placeholder="" style="width:100%;">
	        	  <el-option label="是" value="1"></el-option>
			      <el-option label="否" value="0"></el-option>
			    </el-select>
	        </el-form-item>
	        <el-form-item label="确定重点单位时间" prop="keyunitTime" class="buildformleft">
	        	<el-date-picker
                v-model="netunitinfos.keyunitTimeLong"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                 value-format="timestamp"
                placeholder="选择日期" style="width: 100%;">
              </el-date-picker>
	        </el-form-item>
	        <div style="clear:both;"></div>
	        <el-form-item label="单位其他情况" prop="oother">
	        	<el-input type="textarea" v-model.trim="netunitinfos.oother"></el-input>
	        </el-form-item>
              <el-button type="primary" @click="create('buildInfoForm')" size="medium" native-type="submit">保 存</el-button>
              <el-button @click="cancel('buildInfoForm')" type="text" size="medium">取 消</el-button>
	      </el-form>
	      </el-row>

	      <mapMarker :Show.sync="innerVisible" @getMark="getMark" :gis="netunitinfos.gis" :maptitle="maptitle"></mapMarker>
		</div>
	</slider-panel>
</template>
<script>
	import {
  addUnitObj,//添加联网单位
} from "@/api/admin/network/index";
import mapMarker from "@/components/mapMark";
import {IdentityCodeValid} from '@/utils/validate';
import sliderPanel from '@/components/SliderPanel'
	export default{
		components: {mapMarker,sliderPanel},
		data(){
			function isnumber(rule, value, callback){
		        let reg=/^\d+$/;//非负整数
		            if (!reg.test(value)&&value!="") {
		              callback(new Error('请输入数字!'))
		            }else{
		              callback();
		            }
		    };
		    function isphone(rule, value, callback){
		    	let isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;//手机号码
			    let isMob= /^0?1[3|4|5|7|8][0-9]\d{8}$/;// 座机格式
			    if(isMob.test(value)||isPhone.test(value)){
			        callback();
			    }
			    else if(value!=""){
			        callback(new Error('电话格式不正确!'))
			    }else{
			    	callback();
			    }
		    };
		    function checkIdentity(rule, value, callback){
		    	let result=IdentityCodeValid(value);
	            //var reg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
	            if(!result.pass&&value!=''){
	                callback(new Error(result.tip));
	            }else{
			    	callback();
			    }
	        };

			let self = this;
			return{
				networkbuilds:[],
				maptitle:"",
				netunitinfos:{
				    oname:"",
					olicense:"",
					ophone:"",
					oaddress:"",
					safeDutyName:"",
					safeDutyPhone:"",
					safeDutyIdcard:"",
					safeManagerName:"",
					safeManagerPhone:"",
					safeManagerIdcard:"",
					addressDetail:"",
					road:"",
					xzqy:"",
					street:"",
					mnph:"",
					ldz:"",
					gis:"",
					legalName:"",
					legalPhone:"",
					legalIdcard:"",
					olicenseTime:"",
					olinkman:"",
					olinkphone:"",
					oNature:"",
					oclass:"",
					otype:"",
					isKeyunit:"",
					keyunitTime:"",
					oother:""
				},
				unitrules:{
					oname:[{required: true,message: '此项不能为空',trigger: 'blur'},{max: 100,message: '长度在100个字符以内',trigger: 'blur'}],
					olicense:[{required: true,message: '此项不能为空',trigger: 'blur'},{max: 100,message: '长度在100个字符以内',trigger: 'blur'}],
					ophone:[{required: true,message: '此项不能为空',trigger: 'blur'},
					{validator:isphone,trigger:'blur'}],
					oaddress:[{required: true,message: '此项不能为空',trigger: 'blur'},{max: 200,message: '长度在200个字符以内',trigger: 'blur'}],
					safeDutyName:[{required: true,message: '此项不能为空',trigger: 'blur'},{max: 50,message: '长度在50个字符以内',trigger: 'blur'}],
					safeDutyPhone:[{required: true,message: '此项不能为空',trigger: 'blur'},
					{validator:isphone,trigger:'blur'}],
					safeDutyIdcard:[{required: true,message: '此项不能为空',trigger: 'blur'},
					{validator:checkIdentity,trigger:'blur'}],
					safeManagerName:[{required: true,message: '此项不能为空',trigger: 'blur'},{max: 50,message: '长度在50个字符以内',trigger: 'blur'}],
					safeManagerPhone:[{required: true,message: '此项不能为空',trigger: 'blur'},
					{validator:isphone,trigger:'blur'}],
					safeManagerIdcard:[{required: true,message: '此项不能为空',trigger: 'blur'},
					{validator:checkIdentity,trigger:'blur'}],
					addressDetail:[{max: 200,message: '长度在200个字符以内',trigger: 'blur'}],
					road:[{max: 60,message: '长度在60个字符以内',trigger: 'blur'}],
					xzqy:[{max: 6,message: '长度在6个字符以内',trigger: 'blur'},{validator:isnumber,trigger:'blur'}],
					street:[{max: 3,message: '长度在3个字符以内',trigger: 'blur'},{validator:isnumber,trigger:'blur'}],
					mnph:[{max: 60,message: '长度在60个字符以内',trigger: 'blur'}],
					ldz:[{max: 20,message: '长度在20个字符以内',trigger: 'blur'}],
					gis:[{required: true,message: '此项不能为空',trigger: 'change'}],
					legalName:[{max: 50,message: '长度在50个字符以内',trigger: 'blur'}],
					legalPhone:[{validator:isphone,trigger:'blur'}],
					legalIdcard:[{validator:checkIdentity,trigger:'blur'}],
					olicenseTime:[],
					olinkman:[{max: 50,message: '长度在50个字符以内',trigger: 'blur'}],
					olinkphone:[{validator:isphone,trigger:'blur'}],
					oNature:[],
					oclass:[],
					otype:[],
					isKeyunit:[],
					keyunitTime:[],
					oother:[{max: 200,message: '长度在200个字符以内',trigger: 'blur'}]
				},
				innerVisible:false,
			}
		},
		methods:{
		    create(formName){
		    	const set = this.$refs;
      			set[formName].validate((valid) => {
      				if (valid) {
      					let seninfos=this.netunitinfos;
      					addUnitObj(seninfos).then(res=>{
      						this.$notify({
					            title: '成功',
					            message: '添加成功',
					            type: 'success',
					            duration: 2000
					          });
      						set[formName].resetFields();
      						this.$emit("addSuccess",false);
      					})
      				}
      			})
		    },
		    cancel(formName){
		    	const set = this.$refs;
          set[formName].resetFields();
		    	let isedit=false;
			    for(let item in this.netunitinfos){
			    	if (typeof this.netunitinfos[item]=='string') {
			    		if (this.netunitinfos[item].trim()!='') {
			    		isedit=true;}
			    	}
			    };
		    	if (isedit) {
			    	this.$confirm('内容已被修改，退出将不会保留修改内容', '退出提示', {
			          cancelButtonText: '取消',
			          confirmButtonText: '确定',
			          showClose: false,
			          closeOnClickModal:false,
			          closeOnPressEscape:false,
			          customClass:"delBuildConfirm",
			          cancelButtonClass:"delBuildCancel",
			          confirmButtonClass:"delBuildSure",
			        }).then(()=>{
				    	this.$emit("update:Show",false)
			    	}).catch(()=>{})
		    	}else{
				    this.$emit("update:Show",false)
		    	}
		    },
	        handleChange (value) {//CodeToText TextToCode
		        this.netunitinfos.zxqy=this.netunitinfos.ZXQY[2];
		    },
		    getMark(val){
		      this.netunitinfos.gis=val;
		      this.innerVisible=false;
		    }
		},
		watch:{
		}
	}
</script>
<style type="text/css" lang="scss">
.delBuildConfirm .el-message-box__btns{
  text-align:left;
  .delBuildSure{
    float:left;
    margin-left:0;
    background:#F56C6C;
    border-color:#F56C6C;
    padding:11px 22px;
  }
  .delBuildCancel{
    margin-left:15px;
    padding:11px 22px;
  }
}
.delBuildConfirm .el-message-box__content{
    padding:30px 20px;
 }
	.net-fulldialog > div {
	  width: 1021px !important;
	  margin: 0 auto;
	}
	.net-fulldialog .el-dialog__title {
	  font-size: 32px;
	}
	.net-fulldialog {
	  .el-dialog__header {
	    margin-top: 20px;
	  }
	  .custom-dialog-btn {
	    position: absolute;
	    font-size: 30px;
	    left: 40px;
	    top: 20px;
	    color: #fff;
	    &:hover {
	      cursor: pointer;
	    }
	  }
	  .dialog-footer {
	    text-align: left;
	  }
	}
	.xf-jc-dialog {
	  margin-top:15vh !important;
	}
	.buildbasicinfo{
		margin-bottom: 10px;
	}
	.build-basicForm .el-form-item__label{
		padding:0;
	}
	.buildformleft{
		float: left;
		width: 49%;
		margin-right: 1%;
	}
	.buildformright{
		float: left;
		width: 50%;
	}
	.dialog-header{
		padding: 16px 10px 26px;
		display: flex;
		justify-content: space-between;
	}
	.marktitle{
		font-size: 24px;
	}
	.mapwrap{
		width: 100%;
		height: 740px;
	}
	.innerdialog .el-dialog__body{
		padding: 0;
	}
	.innerdialog{
		border-radius: 10px;
	}
	.search-box{
		position:absolute !important;
		margin-left:50%;
		transform:translateX(-50%);
		margin-top:10px;
	}
</style>
